(박서영)Compliance 설문/응답 리스트 생성

4 files changed, 315 insertions, 0 deletions

diff --git a/app/[lng]/evcp/(evcp)/compliance/[templateId]/page.tsx b/app/[lng]/evcp/(evcp)/compliance/[templateId]/page.tsx
new file mode 100644
index 00000000..5dd74305
--- /dev/null
+++ b/app/[lng]/evcp/(evcp)/compliance/[templateId]/page.tsx
@@ -0,0 +1,66 @@
+import * as React from "react"
+import { notFound } from "next/navigation"
+import { Shell } from "@/components/shell"
+import { InformationButton } from "@/components/information/information-button"
+import { ComplianceTemplateDetail } from "@/lib/compliance/compliance-template-detail"
+import { ComplianceResponseStats } from "@/lib/compliance/responses/compliance-response-stats"
+import { 
+  getComplianceSurveyTemplate,
+  getComplianceQuestions,
+  getComplianceResponses,
+  getComplianceResponseStats
+} from "@/lib/compliance/services"
+
+interface TemplateDetailPageProps {
+  params: {
+    lng: string;
+    templateId: string;
+  };
+}
+
+export default async function TemplateDetailPage({ params }: TemplateDetailPageProps) {
+  const resolvedParams = await params;
+  const { templateId } = resolvedParams;
+  
+  const templateIdAsNumber = Number(templateId);
+
+    // 서버에서 데이터 미리 가져오기
+  const [template, questions, responses, stats] = await Promise.all([
+    getComplianceSurveyTemplate(templateIdAsNumber),
+    getComplianceQuestions(templateIdAsNumber),
+    getComplianceResponses(templateIdAsNumber),
+    getComplianceResponseStats(templateIdAsNumber)
+  ]);
+
+  if (!template) {
+    notFound();
+  }
+
+  return (
+    <Shell className="gap-2">
+      <div className="flex items-center justify-between space-y-2">
+        <div className="flex items-center justify-between space-y-2">
+          <div>
+            <div className="flex items-center gap-2">
+              <h2 className="text-2xl font-bold tracking-tight">
+                템플릿 상세
+              </h2>
+              <InformationButton pagePath="evcp/compliance" />
+            </div>
+            <p className="text-muted-foreground">
+              설문조사 템플릿의 질문들과 옵션을 확인할 수 있습니다.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <ComplianceTemplateDetail 
+        templateId={templateIdAsNumber} 
+        template={template}
+        questions={questions}
+        responses={responses}
+        stats={stats}
+      />
+    </Shell>
+  )
+}
diff --git a/app/[lng]/evcp/(evcp)/compliance/[templateId]/responses/[responseId]/page.tsx b/app/[lng]/evcp/(evcp)/compliance/[templateId]/responses/[responseId]/page.tsx
new file mode 100644
index 00000000..73d9bbac
--- /dev/null
+++ b/app/[lng]/evcp/(evcp)/compliance/[templateId]/responses/[responseId]/page.tsx
@@ -0,0 +1,62 @@
+import * as React from "react"
+import { Shell } from "@/components/shell"
+import { InformationButton } from "@/components/information/information-button"
+import { ComplianceResponseDetail } from "@/lib/compliance/compliance-response-detail"
+import { 
+  getComplianceResponse,
+  getComplianceResponseAnswers,
+  getComplianceResponseFiles,
+  getComplianceSurveyTemplate,
+  getComplianceQuestions
+} from "@/lib/compliance/services"
+
+interface ResponseDetailPageProps {
+  params: {
+    lng: string;
+    templateId: string;
+    responseId: string;
+  };
+}
+
+export default async function ResponseDetailPage({ params }: ResponseDetailPageProps) {
+  const resolvedParams = await params;
+  const { templateId, responseId } = resolvedParams;
+  
+  const templateIdAsNumber = Number(templateId);
+  const responseIdAsNumber = Number(responseId);
+
+  // 서버에서 데이터 미리 가져오기
+  const promises = Promise.all([
+    getComplianceResponse(responseIdAsNumber),
+    getComplianceResponseAnswers(responseIdAsNumber),
+    getComplianceResponseFiles(responseIdAsNumber),
+    getComplianceSurveyTemplate(templateIdAsNumber),
+    getComplianceQuestions(templateIdAsNumber)
+  ]);
+
+  return (
+    <Shell className="gap-2">
+      <div className="flex items-center justify-between space-y-2">
+        <div className="flex items-center justify-between space-y-2">
+          <div>
+            <div className="flex items-center gap-2">
+              <h2 className="text-2xl font-bold tracking-tight">
+                설문조사 응답 상세
+              </h2>
+              <InformationButton pagePath="evcp/compliance" />
+            </div>
+            <p className="text-muted-foreground">
+              설문조사 응답의 모든 답변과 첨부파일을 확인할 수 있습니다.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <ComplianceResponseDetail 
+        templateId={templateIdAsNumber} 
+        responseId={responseIdAsNumber}
+        promises={promises}
+      />
+    </Shell>
+  )
+}
diff --git a/app/[lng]/evcp/(evcp)/compliance/[templateId]/responses/page.tsx b/app/[lng]/evcp/(evcp)/compliance/[templateId]/responses/page.tsx
new file mode 100644
index 00000000..80e15768
--- /dev/null
+++ b/app/[lng]/evcp/(evcp)/compliance/[templateId]/responses/page.tsx
@@ -0,0 +1,119 @@
+import { Suspense } from "react";
+import { notFound } from "next/navigation";
+import { type SearchParams } from "@/types/table";
+import { getComplianceSurveyTemplate, getComplianceResponsesWithPagination, getComplianceResponseStats } from "@/lib/compliance/services";
+import { ComplianceResponsesPageClient } from "@/lib/compliance/responses/compliance-responses-page-client";
+import { Shell } from "@/components/shell";
+import { Skeleton } from "@/components/ui/skeleton";
+import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton";
+import { InformationButton } from "@/components/information/information-button";
+
+interface ComplianceResponsesPageProps {
+  params: Promise<{
+    templateId: string;
+  }>;
+  searchParams: Promise<SearchParams>;
+}
+
+export default async function ComplianceResponsesPage({ params, searchParams }: ComplianceResponsesPageProps) {
+  const resolvedParams = await params;
+  const resolvedSearchParams = await searchParams;
+  const templateId = parseInt(resolvedParams.templateId);
+  
+  if (isNaN(templateId)) {
+    notFound();
+  }
+
+  // pageSize 기반으로 모드 자동 결정 (items 페이지와 동일한 로직)
+  const search = { page: 1, perPage: 10, ...resolvedSearchParams };
+  const isInfiniteMode = search.perPage >= 1_000_000;
+ 
+  // 페이지네이션 모드일 때만 서버에서 데이터 가져오기
+  // 무한 스크롤 모드에서는 클라이언트에서 SWR로 데이터 로드
+  const promises = isInfiniteMode
+     ? undefined
+     : Promise.all([
+        getComplianceSurveyTemplate(templateId),
+        getComplianceResponsesWithPagination(templateId),
+        getComplianceResponseStats(templateId),
+      ]);
+
+  if (!promises) {
+    // 무한 스크롤 모드
+    return (
+      <Shell className="gap-2">
+        <div className="flex items-center justify-between space-y-2">
+          <div className="flex items-center justify-between space-y-2">
+            <div>
+              <div className="flex items-center gap-2">
+                <h2 className="text-2xl font-bold tracking-tight">
+                  응답 현황
+                </h2>
+                <InformationButton pagePath="evcp/compliance" />
+              </div>
+              <p className="text-muted-foreground">
+                준법 설문조사 응답 현황을 확인할 수 있습니다.
+              </p>
+            </div>
+          </div>
+        </div>
+        
+        <Suspense fallback={<div>응답 목록을 불러오는 중...</div>}>
+          <ComplianceResponsesPageClient 
+            templateId={templateId}
+            promises={undefined}
+            isInfiniteMode={true}
+          />
+        </Suspense>
+      </Shell>
+    );
+  }
+
+  const [template, responses, stats] = await promises;
+
+  if (!template) {
+    notFound();
+  }
+
+  return (
+    <Shell className="gap-2">
+      <div className="flex items-center justify-between space-y-2">
+        <div className="flex items-center justify-between space-y-2">
+          <div>
+            <div className="flex items-center gap-2">
+              <h2 className="text-2xl font-bold tracking-tight">
+                응답 현황
+              </h2>
+              <InformationButton pagePath="evcp/compliance" />
+            </div>
+            <p className="text-muted-foreground">
+              템플릿: {template.name} - 준법 설문조사 응답 현황을 확인할 수 있습니다.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <Suspense fallback={<Skeleton className="h-7 w-52" />}>
+        {/* 추가 기능들 */}
+      </Suspense>
+      
+      <Suspense
+        fallback={
+          <DataTableSkeleton
+            columnCount={8}
+            searchableColumnCount={1}
+            filterableColumnCount={2}
+            cellWidths={["10rem", "12rem", "15rem", "20rem", "12rem", "10rem", "12rem", "8rem"]}
+            shrinkZero
+          />
+        }
+      >
+        <ComplianceResponsesPageClient 
+          templateId={templateId}
+          promises={Promise.resolve([responses, stats])}
+          isInfiniteMode={false}
+        />
+      </Suspense>
+    </Shell>
+  );
+}
diff --git a/app/[lng]/evcp/(evcp)/compliance/page.tsx b/app/[lng]/evcp/(evcp)/compliance/page.tsx
new file mode 100644
index 00000000..3b97ce99
--- /dev/null
+++ b/app/[lng]/evcp/(evcp)/compliance/page.tsx
@@ -0,0 +1,68 @@
+import * as React from "react"
+import { type SearchParams } from "@/types/table"
+
+import { Skeleton } from "@/components/ui/skeleton"
+import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton"
+import { Shell } from "@/components/shell"
+import { getComplianceSurveyTemplatesWithPagination } from "@/lib/compliance/services"
+import { ComplianceSurveyTemplatesTable } from "@/lib/compliance/table/compliance-survey-templates-table"
+import { InformationButton } from "@/components/information/information-button"
+
+interface IndexPageProps {
+  searchParams: Promise<SearchParams>
+}
+
+export default async function IndexPage(props: IndexPageProps) {
+  const searchParams = await props.searchParams
+  
+  // pageSize 기반으로 모드 자동 결정 (items 페이지와 동일한 로직)
+  const search = { page: 1, perPage: 10, ...searchParams }
+  const isInfiniteMode = search.perPage >= 1_000_000
+ 
+  // 페이지네이션 모드일 때만 서버에서 데이터 가져오기
+  // 무한 스크롤 모드에서는 클라이언트에서 SWR로 데이터 로드
+  const promises = isInfiniteMode
+     ? undefined
+     : Promise.all([
+        getComplianceSurveyTemplatesWithPagination(),
+      ])
+
+  return (
+    <Shell className="gap-2">
+      <div className="flex items-center justify-between space-y-2">
+        <div className="flex items-center justify-between space-y-2">
+          <div>
+            <div className="flex items-center gap-2">
+              <h2 className="text-2xl font-bold tracking-tight">
+                준법 설문조사 관리
+              </h2>
+              <InformationButton pagePath="evcp/compliance" />
+            </div>
+            <p className="text-muted-foreground">
+              준법 설문조사 템플릿을 관리하고 응답 현황을 확인할 수 있습니다.
+            </p>
+          </div>
+        </div>
+        
+      </div>
+
+      <React.Suspense fallback={<Skeleton className="h-7 w-52" />}>
+        {/* DateRangePicker 등 추가 컴포넌트 */}
+      </React.Suspense>
+      
+      <React.Suspense
+        fallback={
+          <DataTableSkeleton
+            columnCount={6}
+            searchableColumnCount={1}
+            filterableColumnCount={2}
+            cellWidths={["10rem", "40rem", "12rem", "12rem", "8rem", "8rem"]}
+            shrinkZero
+          />
+        }
+      >
+        <ComplianceSurveyTemplatesTable promises={promises} />
+      </React.Suspense>
+    </Shell>
+  )
+}